﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
   
    向左滚动
    <div id="demo" style="background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 300px;">
    <div id="indemo" style="float: left;width: 800%;">
    <div id="demo1" style="float: left;">
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
    </div>
    <div id="demo2" style=" float: left;">
        </div>
    </div> 
    </div>
    <script type="text/javascript">
    <!--
        var tab = document.getElementById("demo");
        var tab1 = document.getElementById("demo1");
        var tab2 = document.getElementById("demo2");
        tab2.innerHTML = tab1.innerHTML;
        var MyMar = null;
        tab.onmouseover = StopMove;
        tab.onmouseout = MoveLeft;

        //停止移动
        function StopMove() {
            clearInterval(MyMar);
        }

        //向左移动
        function MoveLeft(speed) {
            if (!speed) {
                speed = 20;
            }
            MyMar = null;
            MyMar = setInterval(MarqueeL, speed)
        }

        //向右移动
        function MoveRight(speed) {
            MyMar = null;
            MyMar = setInterval(MarqueeR, speed)
        }

        //左移操作
        function MarqueeL() {
            if (tab2.offsetWidth - tab.scrollLeft <= 0)
                tab.scrollLeft -= tab1.offsetWidth
            else {
                tab.scrollLeft++;
            }
        }

        //右移操作
        function MarqueeR() {
            if (tab.scrollLeft <= 0)
                tab.scrollLeft += tab2.offsetWidth
            else {
                tab.scrollLeft--
            }
        }

        //加速左移
        function moveLeftFast() {
            StopMove();
            MoveLeft(10);
        }

        //加速右移
        function moveRightFast() {
            StopMove();
            MoveRight(10);
        }

        function ResetMoveLeft() {
            StopMove(); 
            MoveLeft(20)
        }


        MoveLeft(20);
        

        
       

        

    -->
    </script>

    <input id="Button1" type="button"   onmousedown ="moveLeftFast()" onmouseup="ResetMoveLeft()" value="左移" />
    <input id="Button2" type="button" onmousedown="moveRightFast()"onmouseup="ResetMoveLeft()"  value="右移" />
    </form>
</body>
</html>
